<template>
    <div class="color-legend">
      <div class="color-bar">
        <div
          class="color-box"
          v-for="(color, index) in colors"
          :key="index"
          :style="{ backgroundColor: color, width: boxWidth }"
        ></div>
      </div>
      <div class="legend-labels">
        <span v-for="(level, index) in levels" :key="index">{{ level }}°C</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ColorLegend',
    data() {
      return {
        colors: [
          '#2DCED6', '#CFE0FC', '#799AEB', '#4530D6',
          '#C1FCCF', '#6BDE79', '#56C566', '#E9F785',
          '#D6DF22', '#C7D123', '#EDD6E0', '#F2919A',
          '#E41849', '#DFCBFC', '#BF43EF'
        ],
        levels: [-5, 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 100]
      };
    },
    computed: {
      boxWidth() {
        // 计算每个颜色块的宽度，确保它们填满整个条形
        return `${100 / this.colors.length}%`;
      }
    }
  };
  </script>
  
  <style scoped>
  .color-legend {
    width: 100%;
  }
  
  .color-bar {
    display: flex;
    border: 1px solid #ccc; /* 可选，用于分隔图例 */
    border-radius: 5px;
  }
  
  .color-box {
    height: 15px; /* 设置高度 */
  }
  
  .legend-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px; /* 可以根据需要调整间距 */
    color: #fff;
  }
  </style>
  